<template>


	<el-container class="home-container">
		<!-- 头部区域 -->
		<el-header>
			<div class="img">
				<img src="../assets/图片3.png" />
				<span>电商后台管理系统</span>
			</div>
			<div>
				<el-button type="infor" @click="dialogVisible='true'">修改密码</el-button>
				<el-button type="infor" @click="logout()">退出</el-button>
			</div>
		</el-header>
		<!-- 页面主体区域 -->
		<el-container>
			<!-- 侧边栏 -->
			 <el-aside :width="isCollapse ? '64px' : '200px'">
			        <!-- 顶端折叠按钮 -->
			        <div class="toggle-button" @click="toggleCollapse">|||</div>
			        <!-- 侧边栏菜单区域 -->
			        <el-menu background-color="#333744" text-color="#fff" 
			        active-text-color="#409bff" :unique-opened="true" 
			        :collapse="isCollapse" 
			        :collapse-transition="false" 
			        :router="true" 
			        :default-active="activePath">
			          <!-- 一级菜单 -->
			          <el-submenu :index="item.Id+''" v-for="item in menulist" :key="item.Id">
			            <!-- 一级菜单的模板区域 -->
			            <template slot="title">
			              <!-- 图标 -->
			              <i :class="iconObj[item.Id]"></i>
			              <!-- 文本 -->
			              <span>{{item.Name}}</span>
			            </template>
			            <!-- 二级菜单 -->
			                     <el-menu-item v-if="subItem.ParentId==item.Id" :index="'/'+subItem.Path" v-for="subItem in menulist2"
			             :key="subItem.id" @click="saveNavState('/'+subItem.Path)">
			               <template slot="title">
			                 <!-- 图标 -->
			                 <i class="el-icon-menu"></i>
			                 <!-- 文本 -->
			                 <span>{{subItem.Name}}</span>
			               </template>
			            </el-menu-item>
			          </el-submenu>
			          
			        </el-menu>
			      </el-aside>
			<!-- 右侧内容主体 -->
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
		<!-- 修改密码 -->
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="30%">
		  <el-form :model="form" status-icon label-width="100px" class="demo-ruleForm">
		    <el-form-item label="旧密码" prop="pass">
		      <el-input type="password" v-model="form.JPwd" autocomplete="off" show-password></el-input>
		    </el-form-item>
		    <el-form-item label="新密码" prop="checkPass">
		      <el-input type="password" v-model="form.XPwd" autocomplete="off" show-password></el-input>
		    </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="Edit()">确 定</el-button>
		  </span>
		</el-dialog>
	</el-container>
</template>

<script>
  export default {
    data(){
      return {
        // 左侧菜单数据
        menulist:[],
        menulist2:[],
        // 一级图标对象
        iconObj:{
          '125':'iconfont icon-user',
          '103':'iconfont icon-tijikongjian',
          '101':'iconfont icon-shangpin',
          '102':'iconfont icon-danju',
          '145':'iconfont icon-baobiao'
        },
        //是否折叠
        isCollapse:false,
        // 被激活的链接地址
        activePath:'',
		dialogVisible:false,
		form:{
			Id:"",
			JPwd:"",
			XPwd:""
		}
      }
    },
    created(){
      this.getMenuList()
      this.activePath=window.sessionStorage.getItem('activePath')
    },
    methods: {
      logout: function() {
        window.sessionStorage.clear();
        this.$router.push("/login");
      },
	  async Edit(){
		  this.form.Id=parseInt(window.sessionStorage.getItem("token"))
		  const {
		  	data: res
		  } = await this.$http.post('api/Login/Edit',this.form)
		  if (res.code == -1) {
		  	this.$message.error("旧密码错误！")
		  }else{
			  this.$message.success("修改成功！");
			  this.dialogVisible = false;
			  this.$router.push("/login");
		  }
	  },
      // 获取所有的菜单
    async getMenuList(){
     const {data:res}= await this.$http.post('api/Login/menus',{
       Id:parseInt(window.sessionStorage.getItem("token")) 
     })
     if(res.code!=0) return this.$message.error(res.msg)
     this.menulist=res.data1
     this.menulist2=res.data2
      },
      //点击按钮，切换菜单的折叠与展开
      toggleCollapse(){
        this.isCollapse=!this.isCollapse
      },
      // 保存链接的激活状态
      saveNavState(activePath){
        window.sessionStorage.setItem('activePath',activePath)
        this.activePath=activePath
      }
        
    }
  }
</script>

<style>
	.toggle-button{
		background-color: #4A5064;
		font-size: 10px;
		color: #fff;
		text-align: center;
		line-height: 24px;
		letter-spacing: 0.2em;
		cursor:pointer;
	}
	.img img{
		width: 50px;
		height: 50px;
	}
	.home-container{
		height: 100%;
	}
	.el-header{
		background-color: #373d41;
		display: flex;
		justify-content:space-between;
		padding-left: 0;
		align-items: center;
		color: #fff;
		font-size: 20px;
	}
	.el-header .img{
		display: flex;
		align-items:center;
		span{
			margin-left: 15px;
		}
	}
	.el-aside{
		background-color: #333744;
	}
	.el-aside .el-menu{
		border-right: none;
	}
	.el-main{
		background-color: #EAEDF1;
	}
	.iconfont{
		margin-right: 10px;
	}
</style>
